<!--
 * @Date: 2023-12-20 16:50:11
 * @LastEditTime: 2024-01-30 14:06:04
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="荷包"
      color="#fff"
      leftIcon="left"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    ></uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="money-card">
        <view class="money-title">荷包金额</view>

        <view class="money-num" @click="$c.to({ url: '/package/mine/ti-qu' })">
          {{ userInfo.money2 }}

          <text>元>></text>
        </view>

        <view v-if="showTi" class="btn" @click="open('tiPop')">提取</view>
      </view>

      <view class="log-title">
        <text>荷包金额明细</text>
      </view>

      <view class="log">
        <view class="log-item" v-for="(item, i) in listData" :key="i">
          <view class="item-l">
            <view class="title">
              {{ item.content }}
            </view>

            <view class="time">{{ item.addtime }}</view>
          </view>

          <view class="item-money">{{ item.change_money }}元</view>
        </view>
      </view>
    </mescroll-body>

    <uni-popup ref="tiPop" type="bottom">
      <view class="ti-pop">
        <view class="ti-pop-hd">
          荷包提取

          <view class="close icon" @click="close('tiPop')">
            <image :src="$img('/static/img/close2.png')" lazy-load></image>
          </view>
        </view>

        <view class="ti-pop-bd">
          <view class="row">
            <view class="left">
              <view class="title-color">提取金额</view>
            </view>
          </view>

          <view class="input-box">
            <input v-model.number="money" placeholder="输入提取金额" />
          </view>

          <view class="tip">
            荷包金额剩余: {{ userInfo.money2 }}元
            <text @click="doAll">全部提出</text>
          </view>

          <view class="row">
            <view class="left">
              <view class="title-color">提取方式</view>
            </view>

            <view class="right">
              <view
                class="type"
                v-for="(item, i) in tiType"
                :key="i"
                @click="changeTiType(i)"
              >
                <view class="check icon">
                  <image
                    v-if="tiTypeCur == i"
                    :src="$img('/static/img/check1_act.png')"
                    lazy-load
                  ></image>

                  <image
                    v-else
                    :src="$img('/static/img/check1.png')"
                    lazy-load
                  ></image>
                </view>

                {{ item.title }}
              </view>
            </view>
          </view>

          <template v-if="tiType[tiTypeCur].id == 2">
            <view class="input-box">
              <view class="label">姓名:</view>

              <input v-model="name" placeholder="请输入姓名" />
            </view>

            <view class="input-box">
              <view class="label">账号:</view>

              <input v-model="account" placeholder="请输入账号" />
            </view>
          </template>

          <template v-if="tiType[tiTypeCur].id == 3">
            <view class="input-box">
              <view class="label">开户行:</view>

              <input v-model="bank" placeholder="请输入开户行" />
            </view>

            <view class="input-box">
              <view class="label">姓名:</view>

              <input v-model="name" placeholder="请输入姓名" />
            </view>

            <view class="input-box">
              <view class="label">账号:</view>

              <input v-model="account" placeholder="请输入账号" />
            </view>
          </template>

          <view v-if="pageData" class="tip">
            <text>{{ pageData.withdraw_money }}</text>
            起提,每笔手续费需付
            <text>{{ pageData.withdraw_money_sxf }}</text>
            荷包金额,当日最高可提取
            <text>{{ pageData.max_money }}</text>
          </view>

          <view @click="isAgree = !isAgree" class="agree">
            <view class="icon">
              <image
                v-if="isAgree"
                :src="$img('/static/img/check_act.png')"
                lazy-load
              ></image>

              <image
                v-else
                :src="$img('/static/img/check.png')"
                lazy-load
              ></image>
            </view>

            <view class="agree-r">
              我已阅读并同意
              <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
                《用户协议》
              </text>
              和
              <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
                《隐私政策》
              </text>
            </view>
          </view>

          <view class="submit" @click="$c.noDouble(doSubmit)">立即提取</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 15 // 每页数据的数量,默认10
        }
      },
      listData: [],
      userInfo: uni.getStorageSync('userinfo'),
      showTi: false,
      tiType: [
        {
          id: 2,
          title: '支付宝'
        }
        // {
        //   id: 3,
        //   title: '银行卡'
        // }
      ],
      tiTypeCur: 0,
      pageData: '',
      lastTi: {},
      money: '',
      qrCode: '',
      name: '',
      account: '',
      bank: '',
      isAgree: false
    }
  },

  onShow() {
    this.getUserInfo()
    this.getData()
  },

  onReady() {
    // this.open('tiPop')
  },

  methods: {
    doAll() {
      this.money = this.userInfo.money2 * 1
    },

    getData() {
      this.req({
        url: 'withdraw_log',
        data: {
          page: 1
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            this.pageData = res.data

            let lastTi = {}
            if (res.data.zhifubao)
              lastTi[res.data.zhifubao.type] = res.data.zhifubao
            if (res.data.yinhangka)
              lastTi[res.data.yinhangka.type] = res.data.yinhangka

            this.lastTi = lastTi

            this.changeTiType(this.tiTypeCur)
          }
        }
      })
    },

    doSubmit() {
      if (!this.money) {
        this.$c.toast({
          title: '请输入金额'
        })
        return
      }

      if (!this.name) {
        this.$c.toast({
          title: '姓名不能为空'
        })
        return
      }

      if (!this.account) {
        this.$c.toast({
          title: '账号不能为空'
        })
        return
      }

      if (this.tiType[this.tiTypeCur].id == 3) {
        if (!this.bank) {
          this.$c.toast({
            title: '开户行不能为空'
          })
          return
        }
      }

      if (!this.isAgree) {
        return this.$c.toast({
          title: '请阅读并同意《用户协议》和《隐私政策》'
        })
      }

      this.req({
        url: 'withdraw',
        data: {
          money: this.money,
          type: this.tiType[this.tiTypeCur].id,
          name: this.name,
          number: this.account,
          bank: this.bank
        },
        success: res => {
          if (res.status == 1) {
            this.close('tiPop')

            this.$c.toast({
              title: res.msg,
              duration: 1500,
              success: () => {
                this.getUserInfo()
              }
            })
          }
        }
      })
    },

    changeTiType(i) {
      this.tiTypeCur = i

      const curId = this.tiType[i].id
      const target = this.lastTi[curId]

      if (target) {
        this.name = target.name
        this.account = target.number
        this.bank = target.bank
      } else {
        this.name = ''
        this.account = ''
      }
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'profitMoney2',
        data: {
          page: num
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.data)
            this.mescroll.endByPage(res.data.data.length, res.data.last_page)
          }
        }
      })
    },

    getUserInfo() {
      this.req({
        url: 'user',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.userInfo = res.data.userinfo

            uni.setStorageSync('userinfo', res.data.userinfo)

            if (
              res.data.userinfo.js_is_open == 1 &&
              res.data.userinfo.is_show_js == 1
            ) {
              this.showTi = true
            }
          }
        }
      })
    },

    close(e) {
      this.$refs[e].close()
    },

    open(e) {
      this.$refs[e].open()
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 30rpx 30rpx;

  .money-card {
    background: rgba(14, 9, 21, 0.7);
    border: 2px solid #2c2c23;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 150rpx 30rpx 30rpx;
    margin-top: 20rpx;
    position: relative;

    .money-title {
      position: relative;
      z-index: 1;
      padding-left: 10rpx;
      // padding-top: 30rpx;
      // margin-bottom: 30rpx;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      &::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        width: 125rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background: linear-gradient(
          90deg,
          #2dcbff,
          rgba(255, 149, 251, 0.7),
          rgba(255, 149, 251, 0)
        );
        opacity: 0.7;
      }
    }

    .money-num {
      margin-top: 20rpx;
      // padding: 0 10rpx;

      font-size: 50rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #d0d1ff;

      text {
        font-size: 24rpx;
      }
    }

    .btn {
      width: 90rpx;
      height: 40rpx;
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #222222;
    }
  }

  .log-title {
    margin-top: 30rpx;

    text {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: transparent;

      background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
      background-clip: text;
    }
  }

  .log {
    padding: 1rpx 10rpx 0;

    .log-item {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #333;

      .item-l {
        flex: 1;
        padding-right: 30rpx;

        .title {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .time {
          margin-top: 6rpx;

          font-size: 25rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cccccc;
        }
      }

      .item-money {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }

  .ti-pop {
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #1d1d25, #1d1d25),
      linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb);
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(176, 128, 255, 0.8);
    padding-bottom: 30rpx;

    .ti-pop-hd {
      padding: 20rpx 0;
      padding-left: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;

      .close {
        width: 60rpx;
        height: 60rpx;
      }
      .icon {
      }
    }

    .ti-pop-bd {
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30rpx;

        .left {
          display: flex;
          align-items: center;

          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;

          .title-color {
            font-size: 32rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: transparent;

            background: linear-gradient(
              90deg,
              #6adeff 0%,
              #7ab5ff 50%,
              #ff7feb 100%
            );
            background-clip: text;
          }

          .desc {
            font-size: 26rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #dddddd;
          }
        }

        .right {
          display: flex;
          align-items: center;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;

          .to-rule {
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #d0d1ff;
          }

          .right-icon {
            width: 32rpx;
            height: 32rpx;
          }

          .type {
            display: flex;
            align-items: center;

            .check {
              width: 40rpx;
              height: 32rpx;
              margin-right: 10rpx;
            }

            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }

          .type + .type {
            margin-left: 40rpx;
          }
        }
      }

      .input-box {
        margin-top: 30rpx;
        height: 80rpx;
        border: 1px solid #d0d1ff;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        align-items: center;

        .label {
          padding: 0 20rpx;
          // border-right: 1rpx solid #ccc;

          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #fff;
        }

        input {
          flex: 1;

          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #fff;
        }
      }

      .tip {
        margin-top: 10rpx;

        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;

        text {
          padding: 0 10rpx;

          color: #d0d1ff;
        }
      }

      .agree {
        display: flex;
        padding: 40rpx 0 0;

        .icon {
          width: 32rpx;
          height: 32rpx;
        }

        .agree-r {
          flex: 1;
          word-wrap: break-word;
          word-break: break-all;
          padding-left: 20rpx;
          line-height: 32rpx;

          font-size: 26rpx;
          color: #9d9d9d;

          text {
            color: #d0d1ff;
          }
        }
      }

      .submit {
        margin: 30rpx 0 0;

        width: 100%;
        height: 80rpx;
        background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #222222;
      }
    }
  }
}
</style>
